<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 
		   px像素(pixel)是相对于显示器屏幕分辨率
		   em相对于标签内文本的字体大小
		   rem(root em)相对于根(html)
		-->
		<style type="text/css">
			@media screen and (min-width:550px) {
				html {
					font-size: 50px;
				}
			}

			@media screen and (min-width:997px) {
				html {
					font-size: 100px;
				}
			}

			/* html {
				font-size: 30px;
			} */

			div {
				font-size: 20px;
			}

			span {
				/* font-size: 10em; */
				font-size: 0.625rem;
			}
		</style>
	</head>
	<body>
		<div>冬奥会<span>残奥会</span></div>
	</body>
</html>
